<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0
        }
        div{
            width: 100vw;
            height: 100px;
            background: red;
        }
        h1{
            width: 100%;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>34</p>
    <p>35</p>
    <p>36</p>
    <p>37</p>
    <p>38</p>
    <p>39</p>
    <p>40</p>
    <p>41</p>
    <p>42</p>
    <p>43</p>
    <p>44</p>
    <p>45</p>
    <p>46</p>
    <p>47</p>
    <p>48</p>
    <p>49</p>
    <p>50</p>
</body>
</html>
<!-- 
    总结:
        - rem + 媒体查询解决移动端布局 缺点比较明显，每设置(适配)移动端都需要设置一个媒体查询比较麻烦
    
    引出一个新的单位 vw 视口宽度 1vw/1vh都是当前视口的百分之一 1%
        - vh    视口的高度
        - vw    视口的宽度
        - vmax/vmin  当前视口的vw和vh进行比较
        - 当前视口的宽度为100px，高度为20px
        - vmax:100px=>1vmax 20px=>0.2vmax
        - vmin:100px=>20vmin 20px=>4vmin 了解

    重点:vw单位表示当前可视区域的宽度，的相当于视口宽度的1/100
        - 1vw = 1%的视口
        - 给一个元素设置100vw = 100%的宽度？
            - 在pc端页面浏览器的滚动条是占位置的
            - 在pc端是不相等的
            - 在移动端是相等的 => vw单位

    rem+媒体查询的时候写媒体查询很麻烦
        - 将网页中的html根元素的font-size设置成统一 font-size:100px;
        - 当前元素的真实大小/100px = rem的值,在每个移动端里面做不到响应
        - 移动端发生改变的时候，宽高会发生改变，100px 转换成vw
    
    如何将100px转换成？vw
    在工作中常见的ui设计图的大小宽度时750px的
        - 750px = 100vw
        - 1vw = 7.5px
        - 1px = 0.13vw;
        - 100px = 13.33vw;

    但是在工作中实现ui设计图都需要都考虑dpr
        1.当设计图是640px的时候，dpr考虑为2
            - 640px / 2 = 320px
            - 320px = 100vw
            - 1vw = 3.2px
            - 1px =  0.3125vw
            - 100px = 31.25vw
        
        2.当设计图是750排序的时候，dpr考虑为2
            - 750px / 2 = 375px
            - 375px = 100vw
            - 1vw = 3.75px
            - 1px = 0.2667vw
            - 100px = 26.67vw

    总结vw单位的使用及计算方式
        - 当设计图宽度为640px的时候，html{font-size:31.25vw}
        - 当设计图宽度为750px的时候，html{font-size:26.67vw}
        - 计算方式: 88px / 2 / 100 = 0.44rem; 
        - 好处得到的值比媒体查询计算方式要精确一点，还可以做到常见的移动端适配
        - 只需要记住总结中的结论就可以了，推算过程了解即可！！！
 -->